<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./static/static/vue.min.js"></script>
    <script src="./static/static/axios.min.js"></script>


    <!-- 本地引入lib-master -->
    <link rel="stylesheet" type="text/css" href="./static/lib-master/theme-chalk/index.css" />

    <script src="./static/lib-master/index.js" type="text/javascript" charset="utf-8"></script>

    <!-- <link rel="stylesheet" href="./css/css.css"> -->
    <countDate :remain-time="remainTime" />
</head>

<body>
    <div id='app'>
        <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
            <el-form-item>
                <el-input v-model="dataForm.key" placeholder="请输入商品名称" clearable></el-input>
            </el-form-item>
            <el-form-item>
                <el-button @click="getDataList()">查询</el-button>
                <el-button @click="selectDin()">我的订单</el-button>
                <el-button @click="kanjia()">砍价活动</el-button>
        </el-form>
        <el-table :data="dataList" border v-loading="dataListLoading" @selection-change="selectionChangeHandle"
            style="width: 100%;">
            <el-table-column type="selection" header-align="center" align="center" width="50">
            </el-table-column>
            <el-table-column prop="id" header-align="center" align="center" label="秒杀商品表主键">
            </el-table-column>
            <el-table-column prop="goodsId" header-align="center" align="center" label="商品id">
            </el-table-column>
            <el-table-column prop="miaoshaPrice" header-align="center" align="center" label="秒杀价">
            </el-table-column>
            <el-table-column prop="stockCount" header-align="center" align="center" label="库存数量">
            </el-table-column>
            <el-table-column prop="startDate" header-align="center" align="center" label="秒杀开始时间">
            </el-table-column>
            <el-table-column prop="endDate" header-align="center" align="center" label="秒杀结束时间">
            </el-table-column>
            <el-table-column prop="goodsName" header-align="center" align="center" label="商品名称">
            </el-table-column>
            <el-table-column prop="goodsTitle" header-align="center" align="center" label="商品标题">
            </el-table-column>
            <el-table-column prop="goodsImg" header-align="center" align="center" label="商品图片">
                <template slot-scope="scope">
                    <img :src="scope.row.goodsImg" alt="" width="100px" height="100px">
                </template>
            </el-table-column>
            </el-table-column>
            <el-table-column prop="goodsDetail" header-align="center" align="center" label="商品详细介绍">
            </el-table-column>
            <el-table-column prop="goodsPrice" header-align="center" align="center" label="商品单价">
            </el-table-column>
            <el-table-column prop="goodsStock" header-align="center" align="center" label="商品库存，-1表示没有限制">
            </el-table-column>
            <el-table-column fixed="right" header-align="center" align="center" width="150" label="操作">
                <template slot-scope="scope">
                    <!-- <el-button type="text" size="small" @click=" (scope.row.id)">修改</el-button> -->
                    <el-button type="text" size="small" @click="deleteHandle(scope.row)">详情</el-button>
                </template>
            </el-table-column>
        </el-table>

        <el-dialog title="商品详情" :visible.sync="dialogFormVisible">
            <el-form :model="form">
                <el-form-item label="秒杀商品表主键" :label-width="formLabelWidth">
                    <span>{{form.id}}</span>
                    <!-- <el-input v-model="form.id" autocomplete="off"></el-input> -->
                </el-form-item>
                <el-form-item label="商品id" :label-width="formLabelWidth">
                    <span>{{form.goodsId}}</span>
                    <!-- <el-input v-model="form.goodsId" autocomplete="off"></el-input> -->
                </el-form-item>
                <el-form-item label="秒杀价" :label-width="formLabelWidth">
                    <span>{{form.miaoshaPrice}}</span>
                    <!-- <el-input v-model="form.miaoshaPrice" autocomplete="off"></el-input> -->
                </el-form-item>
                <el-form-item label="秒杀库存数量" :label-width="formLabelWidth">
                    <span>{{form.stockCount}}</span>
                    <!-- <el-input v-model="form.stockCount" autocomplete="off"></el-input> -->
                </el-form-item>
                <el-form-item label="商品名称" :label-width="formLabelWidth">
                    <span>{{form.goodsName}}</span>
                    <!-- <el-input v-model="form.goodsName" autocomplete="off"></el-input> -->
                </el-form-item>
                <el-form-item label="商品标题" :label-width="formLabelWidth">
                    <span>{{form.goodsTitle}}</span>
                    <!-- <el-input v-model="form.goodsTitle" autocomplete="off"></el-input> -->
                </el-form-item>
                <el-form-item label="商品图片" :label-width="formLabelWidth">
                    <!-- <el-input v-model="form.goodsImg" autocomplete="off"></el-input> -->
                    <img :src="form.goodsImg" alt="" width="100px" height="100px">
                </el-form-item>
                <!-- 倒计时判断 -->
                <el-form-item label="秒杀开始时间" :label-width="formLabelWidth">
                    <span>{{form.startDate}}</span>
                    <!-- <el-input v-model="form.startDate" autocomplete="off"></el-input> -->
                </el-form-item>
                <el-form-item label="秒杀结束时间" :label-width="formLabelWidth">
                    <span>{{form.endDate}}</span>
                    <!-- <el-input v-model="form.endDate" autocomplete="off"></el-input> -->
                </el-form-item>
                <span v-if="form.flag==1">
                    <el-form-item label="据活动结束还有：">
                        <template>
                            <span class="count-content">
                                <span style="color: red;">{{ dayString }}</span>天
                                <span style="color: red;">{{ hourString }}</span>小时
                                <span style="color: red;">{{ minuteString }}</span>分钟
                                <span style="color: red;">{{ secondString }}</span>秒
                            </span>
                        </template>
                    </el-form-item>
                </span>
                <span v-if="form.flag==2">
                    <el-form-item label="据活动开始还有：">
                        <template>
                            <span class="count-content">
                                <span style="color: red;">{{ dayString }}</span>天
                                <span style="color: red;">{{ hourString }}</span>小时
                                <span style="color: red;">{{ minuteString }}</span>分钟
                                <span style="color: red;">{{ secondString }}</span>秒
                            </span>
                        </template>
                    </el-form-item>
                </span>
                <span v-if="form.flag==3">
                    <el-form-item label="活动已结束">
                    </el-form-item>
                </span>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <span v-if="form.flag==1">
                    <el-button type="primary" @click="msSubmit()">秒杀</el-button>
                </span>
                <span v-if="form.flag==2">
                    <el-button type="primary" disabled>活动未开始</el-button>
                </span>
                <span v-if="form.flag==3">
                    <el-button type="primary" disabled>活动已结束</el-button>
                </span>
            </span>
    </div>
</body>
<script>
    new Vue({
        el: '#app',
        props: {
            remainTime: {
                // 倒计时间总秒数
                type: Number,
                default: 0
            }
        },
        data() {
            return {
                baseUrl: "http://localhost:88/api",
                token: localStorage.getItem("token"),
                dataForm: {
                    key: ''
                },
                dataList: [],
                pageIndex: 1,
                pageSize: 3,
                totalPage: 0,
                dataListLoading: false,
                dataListSelections: [],
                addOrUpdateVisible: false,
                form: { flag: 0 },
                userId: localStorage.getItem("id"),
                formLabelWidth: '120px',
                dialogTableVisible: false,
                dialogFormVisible: false,
                day: '',
                hour: '',
                minute: '',
                second: '',
                promiseTimer: '',
                addOrder: {
                    id:0,
                    userId: 0,
                    goodsId: 0,
                    goodsName: '',
                    goodsCount: 1,
                    goodsPrice: 0.0,
                    status: 0,
                }
            }
        },
        //方法集合
        methods: {
            // 获取数据列表
            getDataList() {
                this.dataListLoading = true
                axios.get(this.baseUrl + '/shopping/miaoshaactivity/miaoshaList?key=' + this.dataForm.key).then(({ data }) => {

                    if (data && data.code === 0) {
                        this.dataList = data.page
                        this.totalPage = data.page.totalCount
                    } else {
                        this.dataList = []
                        this.totalPage = 0
                    }
                    this.dataListLoading = false
                })
            },
            // 每页数
            sizeChangeHandle(val) {
                this.pageSize = val
                this.pageIndex = 1
                this.getDataList()
            },
            // 当前页
            currentChangeHandle(val) {
                this.pageIndex = val
                this.getDataList()
            },
            // 多选
            selectionChangeHandle(val) {
                this.dataListSelections = val
            },
            //回显详情页面 不经过后台前端回显
            deleteHandle(data) {
                this.form = data;
                this.form.flag = 0;
                this.dialogFormVisible = true;
                this.time()
            },
            //秒杀
            msSubmit() {
                this.addOrder.id = this.form.id;
                this.addOrder.userId = this.userId;
                this.addOrder.goodsId = this.form.goodsId;
                this.addOrder.goodsName = this.form.goodsName;
                this.addOrder.goodsPrice = this.form.miaoshaPrice;
                axios.post(this.baseUrl + '/shopping/orderinfo/save', this.addOrder).then((data) => {
                    if (data.data.code == 0) {
                        this.$message({
                            showClose: true,
                            message: '加入购物车成功',
                            type: 'success'
                        });
                        this.dialogFormVisible = false;
                        this.getDataList();
                    } else {
                        this.$message.error(data.data.msg);
                    }
                })
            },
            selectDin() {
              location.href="orderList.html"  
            },
            getToken() {
                if (this.token == null) {
                    alert("请先登录");
                    location.href = "login.html";
                }
            },
            //计算时间
            time() {
                const st1 = new Date().getTime()    //当前时间毫秒值
                const st2 = new Date(this.form.endDate).getTime()//结束时间毫秒值
                const st3 = new Date(this.form.startDate).getTime()//开始时间毫秒值
                if (st1 - st3 > 0 & st1 - st2 < 0) {
                    //活动开始并且未结束
                    const desc = st2 - st1//距离结束 毫秒值
                    this.remainTime = desc / 1000
                    //console.log('活动未结束', desc / 1000)
                    this.form.flag = 1
                }
                else if (st1 - st3 < 0) {
                    //活动未开始
                    const desc = st3 - st1//距离开始 毫秒值
                    this.remainTime = desc / 1000
                    //console.log('活动未开始', desc / 1000)
                    this.form.flag = 2
                } else {
                    const desc = 0//距离开始 毫秒值
                    this.remainTime = desc / 1000
                    //console.log('活动已结束', desc / 1000)
                    this.form.flag = 3
                }
                this.day = Math.floor((this.remainTime / 3600) / 24)
                this.hour = Math.floor((this.remainTime / 3600) % 24)
                this.minute = Math.floor((this.remainTime / 60) % 60)
                this.second = Math.floor(this.remainTime % 60)
                this.countDowm()

            },
            countDowm() {
                var self = this
                clearInterval(this.promiseTimer)
                this.promiseTimer = setInterval(function () {
                    if (self.day === 0) {
                        if (self.hour === 0) {
                            if (self.minute !== 0 && self.second === 0) {
                                self.second = 59
                                self.minute -= 1
                            } else if (self.minute === 0 && self.second === 0) {
                                self.second = 0
                                self.$emit('countDowmEnd', true)
                                clearInterval(self.promiseTimer)
                            } else {
                                self.second -= 1
                            }
                        } else {
                            if (self.minute !== 0 && self.second === 0) {
                                self.second = 59
                                self.minute -= 1
                            } else if (self.minute === 0 && self.second === 0) {
                                self.hour -= 1
                                self.minute = 59
                                self.second = 59
                            } else {
                                self.second -= 1
                            }
                        }
                    } else {
                        if (self.hour === 0 && self.minute === 0 && self.second === 0) {
                            self.day -= 1
                            self.hour = 23
                            self.minute = 60
                            self.second = 60
                        } else {
                            if (self.hour === 0) {
                                if (self.minute !== 0 && self.second === 0) {
                                    self.second = 59
                                    self.minute -= 1
                                } else if (self.minute === 0 && self.second === 0) {
                                    self.second = 0
                                } else {
                                    self.second -= 1
                                }
                            } else {
                                if (self.minute !== 0 && self.second === 0) {
                                    self.second = 59
                                    self.minute -= 1
                                } else if (self.minute === 0 && self.second === 0) {
                                    self.hour -= 1
                                    self.minute = 59
                                    self.second = 59
                                } else {
                                    self.second -= 1
                                }
                            }
                        }
                    }
                }, 1000)
            },
            formatNum(num) {
                return num < 10 ? '0' + num : '' + num
            },
            kanjia() {
                location.href="kanjiaActivity.html"
            }
        },
        created() {
            this.getToken();
            this.getDataList();
        },
        computed: {
            hourString() {
                return this.formatNum(this.hour)
            },
            minuteString() {
                return this.formatNum(this.minute)
            },
            secondString() {
                return this.formatNum(this.second)
            },
            dayString() {
                return this.formatNum(this.day)
            }
        },
    })
</script>

</html>